<template>
  <div class="wrap"> 
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img :src="banner">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="menu-box2">
      <div class="box-warp" v-for="(item, index) in menuList" :key="index" @click="go(item)">
        <div class="box">
					<span v-if="item.id == stateid"></span>
          <img :src="item.thumbnail">
        </div>
        <p class="rd-title">{{item.cateName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menuList: [],
        id: '',
        banner: '',
				title: '',
				stateid: ''
      }
    },
    methods: {
      go: function (item) {
        var that = this
        var path = ''
        if (item.type === 'article') {
          path = 'articledetail'
        } else if (item.type === 'articles') {
          path = 'articlelist'
        } else if (item.type === 'child-column') {
          path = 'inHot'
        } else if (item.type === 'other') {
					if(item.address === 'inEmail') {
						path = 'inEmail'
					}
					if(item.address === '/emenber/forum') {
						path = 'forum'
					}
				}
        that.$router.push({
          name: path,
          query: {
            id: item.id,
						type: item.type
          }
        })
      },
      getParams () {
        var that = this
        that.id = that.$route.query.id
				that.title = that.$route.query.title
				document.title = that.title
        that.$axios.requestget('/page/category/'+ that.id)
          .then((res) => {
            that.banner = res.banner
            that.menuList = res.categories
						this.getState()
          })
      },
			getState () {
				var that = this
				that.$axios.requestget('/page/comment/count')
					.then((res) => {
						if (res >= 1) {
							that.stateid = 131
						}
					})
			}
    },
    mounted () {
      this.getParams()
    }
  }
</script>

<style>
  .menu-box2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
  }

  .box-warp {
    width: 33.33%;
    padding: 36px 0;
    box-sizing: border-box;
    border-right: #cdcdcd solid 1px;
    border-bottom: #cdcdcd solid 1px;
  }

  .box-warp:nth-child(3) {
    border-right: none;
  }
  .box-warp:nth-child(6) {
    border-right: none;
  }
  .box-warp:nth-child(9) {
    border-right: none;
  }

  .box {
		position: relative;
    width: 88px;
    height: 88px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }
	.box>span{
		position: absolute;
		right: -10px;
		top: -10px;
		display: block;
		background: #f00;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}
  .box>img {
    width: 100%;
    height: 100%;
  }

  .rd-title {
    margin-top: 16px;
    text-align: center;
    font-size: 22px;
    color: #323232;
  }
</style>
